<template>
	<view>
		<view v-if="tabIndex == 0">
			<home-page ref="homePage"></home-page>
		</view>
		<!-- <view v-if="tabIndex == 2">
			<release-page></release-page>
		</view> -->
		<view v-if="tabIndex == 3">
			<msg-page ref="msg"></msg-page>
		</view>
		<view v-if="tabIndex == 4">
			<me-page ref="me"></me-page>
		</view>
		<u-gap height="100"></u-gap>
		<view class="tabbar">
			<view class="bgFff tabbar-box flex-jus">
				<view class="flex1 textC pore" v-for="(item, index) in tabbarList" :key="index"
					@click="item.mall ? openMini() : tabbarClick(index, item)">
					<view class="flex-au">
						<view v-if="item.center" class="center-img">
							<image :src="'../../static/tabbar/' + item.icon + '.png'" mode=""
								style="width: 104rpx;height: 104rpx;"></image>
						</view>
						<view v-else>
							<image
								:src="'../../static/tabbar/' + (tabIndex == index ? item.select : item.icon) + '.png'"
								mode="" style="width: 52rpx;height: 52rpx;"></image>
						</view>
					</view>
					<u-gap height="5"></u-gap>
					<view class="f24 c343 bold">{{ item.title }}</view>
					<view class="msg_count" v-if="item.is_msg && item.msg > 0">{{ item.msg }}</view>
				</view>
			</view>
		</view>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{ 'backgroundColor': '#FFDE6D' }"
				:iconStyle="{ 'color': '#000', 'fontSize': '40rpx', 'fontWeight': 'bold' }"></u-back-top>
		</view>
	</view>
</template>

<script>
import {
	getNoticecount
} from '@/common/api_user.js'

import homePage from '@/pages/index/home.vue'
import releasePage from '@/pages/release/index.vue'
import msgPage from '@/pages/contacts/index.vue'
import mePage from '@/pages/me/index.vue'
export default {
	name: '',
	components: {
		homePage,
		releasePage,
		msgPage,
		mePage
	},
	data() {
		return {
			scrollTop: 0,
			tabIndex: 0,
			tabbarList: [{
				title: '首页',
				icon: 'icon1',
				select: 'icon1-s',
				path: '/pages/index/index'
			},
			{
				title: '商城',
				icon: 'icon2',
				select: 'icon2-s',
				mall: true
			},
			{
				title: '',
				icon: 'icon3',
				center: true,
				path: '/pages/release/index',
			},
			{
				title: '消息',
				icon: 'icon4',
				select: 'icon4-s',
				path: '/pages/contacts/contacts',
				is_msg: true,
				msg: 0
			},
			{
				title: '我',
				icon: 'icon5',
				select: 'icon5-s'
			},
			],
		}
	},
	async onLoad(option) {
		this.tabIndex = option.tab_index || 0
		await this.$onLaunched;
		this.watchGoeasy()
	},
	async onShow() {
		console.log('onShow index', this.$store.state.hasLogin)
		await this.$onLaunched;
		if (this.$refs.me) {
			this.$refs.me.reset()
		}
		if (this.$refs.msg) {
			this.$refs.msg.getNoticecount()
		}
	},
	onShareAppMessage(res) {
		return {
			title: '生活不停，一路伴您',
			path: '/pages/index/index',
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		uni.$emit('onReachBottom');
	},
	created() {

	},
	methods: {
		openMini() {
			uni.navigateToMiniProgram({
				appId: 'wx4550c6b08486d69e',
				path: '/pages/index/index'
			})
		},
		tabbarClick(index, item) {
			if (index == 2) {
				uni.navigateTo({
					url: item.path
				})
				return false
			}
			if (this.tabIndex == index) {
				return false
			}
			this.tabIndex = index
		},
		async watchGoeasy() {
			const that = this
			let count = 0
			let unreadTotal = 0
			that.goEasy.im.on(that.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, setUnreadNumber);

			function setUnreadNumber(content) {
				unreadTotal = content.unreadTotal;
				that.tabbarList[3].msg = unreadTotal
			}
			// const res = await getNoticecount()
			// if(res.code == 200){
			// 	const { comment, likeCollection, notify } = res.data
			// 	count = comment + likeCollection + notify
			// }

			// that.tabbarList[3].msg = count
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #FEF4E8;
}

.tabbar {
	position: fixed;
	bottom: 40rpx;
	left: 0;
	width: 100%;
	z-index: 9999;

	.tabbar-box {
		padding: 10rpx 0 30rpx 0;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;

		.center-img {
			margin-top: -70rpx;
			border: 3px solid #fff;
			border-radius: 50%;
		}
	}
}

.msg_count {
	position: absolute;
	right: 20rpx;
	top: 0;
	min-width: 30rpx;
	padding: 4rpx;
	height: 30rpx;
	line-height: 30rpx;
	background: red;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50%;
}
</style>